<template>
	<div class="BackstageGoods">
		<div class="head">
			商品信息
			<div class="box"></div>
			<button class="btn1" @click="$router.push('/backstage')">BACK</button>
			<div class="clear"></div>
		</div>
		<div class="btn2">
			<Button @click="$router.push('/backstage/Add')">添加商品</Button>
		</div>
		<div class="body">
			<div >
				<table  class="goodstable">
					<tr class="goodstr">
						<td width="30%">品名</td>
						<td width="15%">价格</td>
						<td width="15%">类型</td>
						<td>操作</td>
					</tr>
					<tr v-for="(item,i) in shangpin" class="goodstr">
						<td width="30%">
							<Input type="text" v-model="form.commodity_name" v-if="editi === i" />
							<span v-else class="lianjie" @click="chuang(item)">{{item.commodity_name}}</span>
						</td>
						<td width="15%">
							<Input type="text" v-model="form.price" v-if="editi === i"/>
							<span v-else>{{item.price}}</span>
						</td>
						<td width="15%">
							<Input type="text" v-model="form.type" v-if="editi === i" />
							<span v-else>{{item.type}}</span>
						</td>
						<td>
							<div v-if="editi === i">
								<Button @click="handleSave(item,i)" size="small">保存</Button>
								<Button @click="editi = -1" size="small">取消</Button>
							</div>
							<div v-else>
								<Button @click="handleEdit(item,i)" size="small">修改</Button>
								<Button @click="remove(item,i)" size="small">删除</Button>
							</div>
						</td>
					</tr>
				</table>
			</div>
			<Modal
					v-model="kaiguan"
					title="缩略图">
				<div><img :src="'http://wsl/static/img/'+img" alt="" width="90%" height="90%"></div>
			</Modal>
		</div>

	</div>
</template>

<script>
	export default {
		name: "BackstageGoods",
		data() {
			return {
				columns: [
					{
						title: '品名',
						slot: 'commodity_name'
					},
					{
						title: '价格',
						slot: 'price',
						width: 70,
					},
					{
						title: '类型',
						slot: 'type',
						width: 80,
					},
					{
						title: '操作',
						slot: 'action',
						width: 117,
						align: 'center'
					}
				],
				shangpin: [],
				kaiguan:false,
				img:'default.png',
				form: {
					id: '',
					commodity_name: '',  // 第一列输入框，当然聚焦的输入框的输入内容，与 data 分离避免重构的闪烁
					price: '',  // 第二列输入框
					type: '',  // 第三列输入框
				},
				editi: -1,  // 当前聚焦的输入框的行数
			}
		},
		async mounted() {
			let d1 = await this.$axios.post('root/RootSee/shopxq', this.$store.state.id).then(r => r.data)
			this.shangpin = d1.commodity
		},
		methods: {
			chuang(item) {
				this.img = item.commodity_img
				this.kaiguan = true
			},
			handleEdit(item, i) {
				this.form.commodity_name = item.commodity_name;
				this.form.price = item.price;
				this.form.type = item.type;
				this.editi = i;
			},
			async handleSave(item, i) {
				this.form.id = item.id
				await this.$axios.post('Shop/index/UpdateCommodity', this.form).then(r => r.data)
				this.shangpin[i].commodity_name = this.form.commodity_name;
				this.shangpin[i].price = this.form.price;
				this.shangpin[i].type = this.form.type;
				this.editi = -1;
				this.$Message.success('修改商品成功');
			},
			async remove(item, i) {
				let d3 = await this.$axios.post('Shop/index/DelCommodity', item).then(r => r.data)
				if (d3.status) {
					this.$Message.success('删除商品成功');
				}
				this.shangpin.splice(i, 1);
			}
		},
	}
</script>

<style lang="less">
	.BackstageGoods {
		max-width: 700px;
		margin: auto;
		.head {
			height: 35px;
			line-height: 35px;
			color: aliceblue;
			width: 100%;
			background: #de393e;
			font-size: 22px;
			text-align: center;
			padding-right: 84px;
		}
		.box {
			width: 0;
			height: 0;
			margin-top: 7px;
			margin-left: 15px;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid aliceblue;
		}
		.clear {
			clear: both;
		}

		.btn1 {
			background: aliceblue;
			font-size: 16px;
			margin-top: 7px;
			margin-left: -1px;
			color: #de393e;
			height: 22px;
			line-height: 22px;
			padding: 0px 5px;
			border: 1px aliceblue solid;
			border-radius: 10%;
			cursor: pointer;
			float: left;
		}
		.body {
			padding: 50px 0px;
		}
		.btn2 {
			float: right;
			margin-top: 10px;
			margin-right: 10px;
		}
		.lianjie{
			color: #4288ce;
			border-bottom: 1px #4288ce solid;
		}
		.goodstable{
			width: 100%;
			text-align: center;
			border-top: #999999 1px solid;
			border-bottom: #999999 1px solid;
		}
		.goodstr{
			height: 35px;
			border: #999999 1px solid;
		}
	}
</style>